<template>
  <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="supplyid" label="供应商id" width="180" sortable/>
        <el-table-column prop="supplyname" label="供应商名" width="180" sortable />
        <el-table-column prop="inprice" label="进价" width="180" sortable/>
        <el-table-column prop="quantity" label="数量" width="180" sortable/>
        <el-table-column prop="pid" label="进货商品id" width="180" sortable/>
        <el-table-column prop="indate" label="进货日期" width="180" sortable/>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script  setup>
import{ref,onMounted}  from "vue";
import api  from "../api/index.js";
//绑定表格数据
const tableData=ref([])
//组件挂载之后执行的钩子函数
onMounted(async function (){
  const result=await api.getSupplyList();
  tableData.value=result;
});

const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleDelete = (index, row) => {
  console.log(index, row)
}

</script>